<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>동적 리스트 뿌리기</title>
	
		
	<!--[[  Hybrid 베이스-->
	<script type="text/javascript" src="../../js/hybrid/hybrid.class.js"></script>
	<script type="text/javascript" src="../../js/hybrid/hybrid.common.js"></script>
	<!-- ]] -->
	
	<script type="application/javascript" src="../../js/ext_js/iscroll-lite.js?v4"></script>
	<link rel="stylesheet"  href="../../css/iscroll.css" />

	<!--[[  JQuery Mobile -->
	<link rel="stylesheet"  href="../../js/jqm/jquery.mobile-1.0rc3.min.css" />
	
	<script src="../../js/jqm/jquery.js"></script>
	<script src="../../js/jqm/jquery.mobile-1.0rc3.min.js"></script>
	<!-- ]] -->

</head> 
<body> 

<div data-role="page" class="type-index">

<script type="text/javascript">

	var dataFile ="../../data/list-datafile.json";

    function start() {
    	hybrid.debug('start()','ready!!!');  
    	hybrid.file.load(dataFile);
    }
    
// hybrid.file.load 완료 후 처리     
	function processFileOK(ret) {

		//alert(ret);
		jsonData = JSON.parse(ret);

		// jQuery("ul li").remove(); // 참고 listview 지울때
		var ulNode = $("#listview");
	
		for (i=0;i < jsonData.body.count;i++) {

			var innerHTML = '<li><a href="'+jsonData.body.array[i].href +'" data-params="'+encodeURI(JSON.stringify(jsonData.body.array[i])) +'" data-rel="dialog" data-transition="pop">';
			
			//var innerHTML = '<li><a href="'+jsonData.body.array[i].href +'" data-rel="dialog" data-transition="pop">';
			innerHTML = innerHTML + '<img src="'+ jsonData.body.array[i].imgsrc + '"/>';
			innerHTML = innerHTML + '<h3>'+ jsonData.body.array[i].t1+'</h3>';
			innerHTML = innerHTML + '<p>'+ jsonData.body.array[i].t2 +'</p></a></li>';
		
			ulNode.append(innerHTML);	
		}
	
		ulNode.listview("refresh");	
		loaded();
	}
	
	var myScroll;
	function loaded() {
		myScroll = new iScroll('wrapper');
		document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
	}

	start();

</script>


	<div data-role="header" data-theme="a">
	<h1>Lists</h1>
	<a href="#" data-rel="back" data-icon="back" data-direction="reverse" class="ui-btn-left jqm-back">BACK</a>
	</div><!-- /header -->

	<div id="wrapper">
		<div data-role="content" id="scroller">
			<ul data-role="listview" id="listview">
			<!-- 여기에 동적으로 데이터가 들어갑니다 -->
			</ul>
		
		</div><!-- /content -->
	</div><!-- /wrapper -->

<div data-role="footer" data-position="fixed">
     <h1>Fixed toolbars</h1>
</div><!-- /Footer -->

</div>
</body>
</html>